<template>
  <div id="content">
    <div class="tubiao">
      <el-button circle type="info" size="small" @click="showSection('translation') " v-if="!showDuFuIntro">译文</el-button>
      <el-button circle type="info" size="small"  @click="showSection('annotate')" v-if="!showDuFuIntro">注释</el-button>
      <el-button circle type="info" size="small" @click="showSection('appreciation' )" v-if="!showDuFuIntro">赏析</el-button>
      <el-button circle type="info" size="small" @click="showSection('background')" v-if="!showDuFuIntro">背景</el-button>
    </div>
    <div class="show">
      <!--杜甫简介-->
      <h3 v-if="showDuFuIntro" style="color: rgba(126, 145, 206, 0.772);font-style: italic">杜甫简介</h3>
      <br>
      <p v-if="showDuFuIntro" class="du">
          杜甫（712年2月12日—770年），字子美，自号少陵野老，祖籍襄阳（今属湖北），自其曾祖时迁居巩县（今河南巩义西南）。唐代伟大的现实主义诗人。与李白合称“李杜”“大李杜”，也常被称为“老杜”。
      </p>
      <br>
      <p v-if="showDuFuIntro" class="du">
          杜甫自幼好学，知识渊博，颇有政治抱负。唐玄宗开元后期，举进士不第，漫游各地。后寓居长安近十年，未能有所施展，生活贫困，逐渐对当时的社会状况有较深的认识。后靠献赋才得授小官。安史之乱爆发、长安失陷后，他曾被困城中半年，后逃至凤翔，被唐肃宗拜为左拾遗，世称“杜拾遗”。长安收复后，随肃宗还京，又被外放为华州司功参军。期间创作了《登高》《春望》《北征》以及“三吏”“三别”等名作。后弃官移家至成都，一度在剑南节度使严武幕中任参谋，被严武表授为检校工部员外郎，故世称“杜工部”。晚年携家出蜀，于大历五年（770年）冬在辗转途中逝世，享年五十九岁。
      </p>
      <br>
       <p v-if="showDuFuIntro" class="du">
          杜甫的人格，也被认为是中华民族文人品格的楷模。自晚唐两宋后，杜甫逐渐声名远播，对中国文学和日本文学都产生了深远的影响。后世尊称他为“诗圣”，称其诗为“诗史” 。其传世作品大多集于《杜工部集》。
       </p>
       <!--古诗内容-->
      <div v-else>
        <!--显示古诗名-->
        <h3  style=" text-align: center;">{{ selectedPoemTitle }}</h3>
        <br>
        <p v-for="(paragraph, index) in selectedPoemParagraphs" :key="index" style="font-size: 20px; margin-bottom: 1em; text-align: center; ;">
          {{ paragraph }}
        </p>
        <!-- 显示译文 -->
        <div v-if="activeSection === 'translation' && selectedPoemTranslation.length > 0">
          <h3 style="color: rgba(66, 189, 217, 0.772);font-style: italic;font-family: '宋体', SimSun, sans-serif;">译文</h3>
          <p v-for="(translation, index) in selectedPoemTranslation" :key="index" class="commen" >
            {{ translation }}
          </p>
        </div>
        <!-- 显示注释 -->
        <div v-if="activeSection === 'annotate' && selectedPoemAnnotation.length > 0">
          <h3 style="color: rgba(114, 121, 219, 0.772);font-style: italic;font-family: '宋体', SimSun, sans-serif;">注释</h3>
          <p v-for="(annotation, index) in selectedPoemAnnotation" :key="index" class="commen">
            {{ annotation }}
          </p>
        </div>
        <!-- 显示赏析 -->
        <div v-if="activeSection === 'appreciation' && selectedPoemAppreciation.length > 0">
          <h3  style="color: rgba(169, 211, 231, 0.772);font-style: italic;font-family: '宋体', SimSun, sans-serif;">赏析</h3>
          <p v-for="(appreciation, index) in selectedPoemAppreciation" :key="index"  class="commen">
            {{ appreciation }}
          </p>
        </div>
        <!-- 显示背景 -->
        <div v-if="activeSection === 'background' && selectedPoemBackground.length > 0">
          <h3 style="color: rgba(223, 137, 208, 0.772);font-style: italic;font-family: '宋体', SimSun, sans-serif;">背景</h3>
          <p v-for="(background, index) in selectedPoemBackground" :key="index"  class="commen">
            {{ background }}
          </p>
        </div>
       </div>
    </div>
  </div>
</template>

<script>
import { mapGetters,mapState } from 'vuex';
export default {
  name:"Content",
   data() {
    return {
      activeSection: null //被选中的选项
    };
  },
  computed: {
    ...mapGetters(['selectedPoemData']),
    ...mapState(['showDuFuIntro',]),

    selectedPoemTitle() {
      //三元运算符，返回的是筛选的数据
      return this.selectedPoemData ? this.selectedPoemData.title : '';
    },
    selectedPoemParagraphs() {
      return this.selectedPoemData ? this.selectedPoemData.paragraphs : [];
    },
    selectedPoemTranslation() {
      return this.selectedPoemData ? this.selectedPoemData.translation : [];
    },
    selectedPoemAnnotation() {
      return this.selectedPoemData ? this.selectedPoemData.annotate : [];
    },
    selectedPoemAppreciation() {
      return this.selectedPoemData ? this.selectedPoemData.appreciation : [];
    },
    selectedPoemBackground() {
      return this.selectedPoemData ? this.selectedPoemData.background : [];
    }
  },
  methods: {
    //这样可以点击哪个就可以显示哪个
    showSection(section) {
      this.activeSection = section;
    }
  }
}
</script>

<style scoped>
#content {
  width: 95%;
  height: 100%;
  display: flex;
  flex-direction: column;
  /* align-items: flex-start;
  justify-content: center;  */
   border: 5px solid rgba(144, 161, 211, 0.1);
   margin-left: 2%;
   margin-right: 2%;
 
}
.show{
  margin-top:5% ;
  margin-left: 10%;
  font-family: 'Arial', sans-serif;
   /* 添加滚动条 */
  overflow: auto;
  max-height: 65vh;
}
.tubiao {
   margin-top:2% ;
   margin-right: 2%;
    text-align: right; /* 设置图标容器内的内容靠右对齐 */
  }
  .commen{
    line-height: 27px;
    margin-top: 3%;
    margin-left: 10%;
    font-size: 17px;
    text-indent: 1.5em; /* 首行缩进 */
    font-family: '宋体', SimSun, sans-serif;
  }
  .du{
    line-height: 26px;
    margin-top: 1%;
    font-size: 17px;
    text-indent: 2em; /* 首行缩进 */
    font-family: '宋体', SimSun, sans-serif;
  }
/* 滚动条样式 */
.show::-webkit-scrollbar {
  width: 10px; /* 设置滚动条的宽度 */
}
.show::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2); /* 设置滚动条的背景色 */
  border-radius: 5px; /* 设置滚动条的圆角 */
}
.show::-webkit-scrollbar-track {
  background: transparent; /* 设置滚动轨道的背景色 */
}
  
</style>
